<template>
    <div class="operationBasicsDetail">
        <div class="header">
            <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
        </div>

        <!-- 浮动导航栏 -->
        <div class="hmshop-floating-nav" v-if="showFloatingNav">
            <ul>
                <li @click="scrollToElement('product_detail_top')"
                    :class="{ 'red-text': activeNavItem == 'product_detail_top' }">
                    商品
                </li>

                <li @click="scrollToElement('product_detail_title--mechanism')"
                    :class="{ 'red-text': activeNavItem == 'product_detail_title--mechanism' }">
                    机制
                </li>
                <li @click="scrollToElement('product_detail_title--info')"
                    :class="{ 'red-text': activeNavItem == 'product_detail_title--info' }">
                    详情
                </li>
                <li @click="scrollToElement('product_detail_title--content')"
                    :class="{ 'red-text': activeNavItem == 'product_detail_title--content' }">
                    记录
                </li>

            </ul>
        </div>

        <div class="contents" @scroll="checkScrollPosition"
            :style="{ 'paddingBottom': detailInfo.auditStatus !== '-2' ? '22.4vw' : '0' }">
            <!-- 轮播 -->
            <div class="product_detail_top" id="product_detail_top">
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'" fit="cover"
                                @click="enlargeImage(realSrcList, index)" />
                        </van-swipe-item>
                        <template #indicator="{ active, total }">
                            <div class="hmshop-custom-indicator fl-box-center">{{ active + 1 }}/{{ total }}</div>
                        </template>
                    </van-swipe>
                    <van-image :src="icon_imgNull" v-if="!realSrcList.length" fit="cover"> </van-image>

                    <!-- 轮播多机制 -->
                    <div v-if="mechanismList?.cooperationMode" class="mechanism_mall">
                    </div>
                    <!-- 库存 -->
                    <div class="stock_box">
                        <div>剩余库存</div>
                        <div class="line" />
                        <div>{{ Number(detailInfo.stockInfo?.stockAvailable) || 0 }}件</div>
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product_detail_top_details" id="product_detail_title--details">

                <div class="product_stylename">
                    <div class="product_mechanism" v-if="mechanismList?.cooperationMode">多机制</div>
                    <div class="styleName text-el">{{ detailInfo.styleName }}</div>
                </div>

                <!-- 69 -->
                <div class="product_box mt-10" v-if="detailInfo.stockCode || detailInfo.styleCode">
                    <div class="product_fl_box">
                        <div class="box_l" v-if="detailInfo.stockCode">

                            <div class="l_title"><span>库存编码</span></div>
                            <div class="l_code text-el ">{{ detailInfo.stockCode }}</div>
                            <div class="l_copy" @click="copyClick(detailInfo.stockCode)"></div>
                        </div>
                        <div class="box_r" v-if="detailInfo.styleCode">
                            {{ detailInfo.styleCode }}
                            <div class="icon_69"></div>
                        </div>

                    </div>
                </div>

                <div class="product_users mt-10 b-box fl-box-s-b">
                    <div class="product_users_item">
                        <div class="product_users_title">招商员</div>
                        <div class="product_users_text">{{ detailInfo.recruiterUserName }}</div>

                    </div>
                    <div class="line"></div>
                    <div class="product_users_item">
                        <div class="product_users_title">招商部</div>
                        <div class="product_users_text">{{ detailInfo.recruiterDeptName }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="product_users_item">
                        <div class="product_users_title">库位码</div>
                        <div class="product_users_text">{{ detailInfo.stockInfo?.locationName }}</div>
                    </div>
                </div>



                <div class="product_id mt-10 fl-box-s-b">
                    <div class="produc_left fl-box-s-b b-box">
                        <span>商品编码</span>
                        <span>{{ detailInfo.id }}</span>
                        <span class="copy" @click="copyClick(detailInfo.id)"></span>
                    </div>
                    <div class="coreName fl-box" v-if="detailInfo.coreName">
                        <div class="goods_r_r">{{ detailInfo.coreName }}</div>
                    </div>
                </div>
            </div>
            <!-- 轮播机制卡片 -->
            <div id="product_detail_title--mechanism">
                <mechanismCardNew :data="detailInfo.mechanismList"></mechanismCardNew>
            </div>
            <!-- 商品信息 -->
            <div id="product_detail_title--info">
                <template v-for="(item, index) in infoList" :key="index">
                    <messageInfo :type="index" :data="item.popData" :title="item.content"></messageInfo>
                </template>
            </div>
            <!-- 跳转 -->
            <div class="mechanism_area mb-60" id="product_detail_title--content">
                <messageBox title="查看记录" :downShow="false">
                    <div class="pop_xhibit_item linkbox" @click="jumps">
                        <div class="pop_linklabel">
                            <div class="imgbox rk"></div>
                            <span>出库记录</span>
                        </div>
                        <div class="pop_rjt"></div>
                    </div>
                </messageBox>
            </div>
            <!-- 空白 -->
            <div class="back" v-if="detailInfo.auditStatus !== '-2'"></div>
            <!-- 底部更多等 -->
            <div class="footer" v-if="detailInfo.auditStatus !== '-2'">
                <div class="more" @click="moreClick">
                    <span>补样数量：</span>
                    <van-stepper v-model="sampleNum" :min="1" :max="999" integer />
                </div>
                <div class="footer_right" @click="invitationClick">发起邀约</div>
            </div>
        </div>



        <!-- 二次确认 -->
        <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
            <div class="dialog_top">
                <van-image :src="icon_erciqueren"></van-image>
                <div class="title">补样确认</div>
                <div class="describe">
                    确认向产品部发起【{{ detailInfo.styleName }}】的补样申请
                </div>
            </div>
            <div class="postscript">
                <div class="buttons">
                    <div class="cancel" @click="dialogShow = false">取消</div>
                    <div class="submit" @click="returnSubmit">
                        <template v-if="loading">
                            <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                        </template>
                        <template v-else>
                            确认
                        </template>
                    </div>
                </div>
            </div>
        </van-dialog>

        <div class="top_loading" v-if="pageloading">
            <van-loading type="spinner" size="50px" vertical> </van-loading>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { showImagePreview, showFailToast } from "vant";
import { hmSupplierList, getbrandId } from "@/api/supplierList/index";
import { copyTextToClipboard } from '@/utils/index'
import { sampleAuditByid, addSampleAudit } from '@/api/operation/index'
import { listBrand } from "@/api/productList/index";
import { getInfo } from "@/api/supplierList/index";
import messageInfo from './components/messageInfo.vue'
import messageBox from './components/messageBox.vue'
import mechanismCardNew from '@/views/operation/product/components/mechanismCardNew.vue'
const icon_pinpaizizhi = new URL("@/assets/operation/icon_pinpaizizhi.png", import.meta.url).href;
const icon_shangpinzizhi = new URL("@/assets/operation/icon_shangpinzizhi.png", import.meta.url).href;
const icon_zhibobuchongxinxi = new URL("@/assets/operation/icon_zhibobuchongxinxi.png", import.meta.url).href;
const icon_jichuxinxi = new URL("@/assets/operation/icon_jichuxinxi.png", import.meta.url).href;
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;

const icon_imgNull = new URL("@/assets/newui/imgNull.jpg", import.meta.url).href;
const route = useRoute();
const router = useRouter();
const otherImageSUpplierList = ref<string[]>([]);

const loading = ref(false)
/** 单子id */
const uniquekey = computed(() => {
    return route.query.id;
});
/** 商品id */
const productId = computed(() => {
    return route.query.productId;
});
// 信息
const infoList = ref<any>([
    { img: icon_jichuxinxi, title: '基础信息：供应商名｜类目｜品牌｜对接群｜规格/材质｜历史最低售价', content: '基础信息' },
    { img: icon_zhibobuchongxinxi, title: '直播补充信息：发货时间｜发货地｜物流/快递｜使用人群｜厂家可用库存 ', content: '直播补充信息' },
    { img: icon_zhibobuchongxinxi, title: '供应商信息：商家类型｜商品类目｜厂家地址｜联系人｜联系电话 ', content: '供应商信息' },
    { img: icon_shangpinzizhi, title: '商品资质：商品实拍｜备案政策/许可证证件｜其他资质', content: '商品资质' },
    { img: icon_pinpaizizhi, title: '品牌资质：品牌名称｜品牌商标注册证｜商标授权使用证明', content: '品牌资质' },

])
onMounted(async () => {
    pageloading.value = true
    await getDetail()
    infoList.value.forEach(async (item, index) => {
        if (index == 4) {
            const res = await listBrand({ supplierId: detailInfo.value.supplierId });
            if (res.rows.length > 0) {
                const brandLists = res.rows.filter(
                    (item: any) => item.brandName == detailInfo.value.brandName
                );
                if (brandLists.length > 0) {
                    const brandInfo = await getbrandId(brandLists[0].id);
                    // 品牌商标注册证
                    if (brandInfo.data.brandImage) {
                        brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
                    }
                    // 商标授权使用证明
                    if (brandInfo.data.usageImage) {
                        brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
                    }
                    // 店铺销售授权
                    if (brandInfo.data.sellImage) {
                        brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
                    }
                    // 其他补充资质
                    if (brandInfo.data.otherImage) {
                        brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
                    }
                    // 联名款/其他授权
                    if (brandInfo.data.jointlyImage) {
                        brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
                    }
                    item.popData = brandInfo.data;
                    item.popData.brandName = detailInfo.value.brandName

                } else {
                    item.popData = {};
                    item.popData.brandName = detailInfo.value.brandName
                }
            } else {
                item.popData = {};
                item.popData.brandName = detailInfo.value.brandName
            }
        } else if (index == 2) {
            const response = await hmSupplierList({ id: detailInfo.value.supplierId });
            if (response.rows[0]?.otherImage) {
                const real_src = response.rows[0].otherImage.split(",");
                fetchImagesSequentially(real_src, otherImageSUpplierList.value);
                response.rows[0].otherImageSUpplier = otherImageSUpplierList.value
            }
            if (response.rows[0] && response.rows[0].businessImage) {
                response.rows[0].businessImageSupplier = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
            }
            item.popData = response.rows[0]
        } else {
            item.popData = detailInfo.value
        }
    });
    pageloading.value = false
})

// 机制1
const mechanismList = ref<any>()
const detailInfo = ref<any>({});
// 更多弹窗
const rightPop = ref(false)

// 部门名称
const deptName = ref()
// 补样数量
const sampleNum = ref()


const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);

// 补样弹窗
const dialogShow = ref(false)
//页面加载loading
const pageloading = ref(false)






/** 发起邀约 */
const returnSubmit = async () => {
    loading.value = true
    try {
        await addSampleAudit({ productId: productId.value, sampleNum: sampleNum.value,outLogId: detailInfo.value.outLogId })
        loading.value = false
        // showSuccessToast({ type: "success", message: "补样邀约发起成功" });
        dialogShow.value = false
        clearImgs();
        getDetail();
        router.push({ path: '/supplyInvitationSuccess', })
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('补样邀约发起失败');
        }
        loading.value = false
    }
}




/** 清空所有图片 */
const clearImgs = () => {
    realSrcList.value = [];
    voucherImageList.value = [];
    customsDeclarationImageList.value = [];
    customsInformationImageList.value = [];
    customsInspectionImageList.value = [];
    customsTestReportImgaeList.value = [];
    otherImageList.value = [];
};




/** 更多点击事件 */
const moreClick = () => {
    rightPop.value = !rightPop.value
}
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    // 用于修改状态后按钮隐藏 解决商品多次点击问题
    detailInfo.value.auditStatus = ''
    const res = await sampleAuditByid({ id: uniquekey.value, productId: productId.value });

    // 根据供应商id获取供应商详情
    const response = await hmSupplierList({ id: res.data.supplierId });
    if (response.rows[0] && response.rows[0].businessImage) {
        res.data.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
    }

    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
        res.data.productImages = realSrcList.value
    }
    if (res.data.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
        res.data.voucherImages = voucherImageList.value
    }
    if (res.data.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
        res.data.customsDeclarationImages = customsDeclarationImageList.value
    }
    if (res.data.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
        res.data.customsInformationImages = customsInformationImageList.value
    }
    if (res.data.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
        res.data.customsInspectionImages = customsInspectionImageList.value
    }
    if (res.data.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
        res.data.customsTestReportImgaes = customsTestReportImgaeList.value
    }
    if (res.data.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
        res.data.otherImages = otherImageList.value
    }

    detailInfo.value = res.data;
    mechanismList.value = res.data.mechanismList[1]


    const data = await getInfo()
    deptName.value = data.data.user.dept.deptName
}



/** 回退 */
const handleLeft = () => {
    router.push('/supplyInvitation');
};
/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};
/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}

// 是否显示浮动导航栏
const showFloatingNav = ref(false);
const activeNavItem = ref("");
const scrollToElement = (elementId: string) => {
    const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight;

    const mechanismOffsetHeight: any = (document.querySelector("#product_detail_title--mechanism") as any).offsetHeight;

    const firstscoll = topOffsetHeight - 40 + (document.querySelector("#product_detail_title--details") as any).offsetHeight

    const secondscoll = firstscoll + mechanismOffsetHeight

    const infoOffsetHeight: any = (document.querySelector("#product_detail_title--info") as any).offsetHeight;

    const thirdscoll = secondscoll + infoOffsetHeight

    switch (elementId) {
        case "product_detail_top":
            goScrollTo(0)
            break;
        case "product_detail_title--mechanism":
            goScrollTo(firstscoll)
            break;
        case "product_detail_title--info":
            goScrollTo(secondscoll)
            break;
        case "product_detail_title--content":
            goScrollTo(thirdscoll)
            break;
        default:
            return; // 如果没有匹配的 elementId，直接返回
    }

};

const goScrollTo = (scrollTo) => {
    const el = document.querySelector(".contents");
    const scrollNow = el!.scrollTop;

    if (scrollNow == scrollTo) {
        return;
    } else {
        el?.scrollTo({ top: scrollTo, behavior: "smooth" })
    }

}
/** 定位悬浮回显样式 */
const checkScrollPosition = (event) => {

    // 滚动条距离顶部的距离
    const scrollTop = event?.target.scrollTop;
    // 计算商品内容区域的位置
    const productTopOffset =
        document.getElementById("product_detail_top")?.offsetTop || 0;

    // topOffsetHeight ==> 盒子高度   offsetTop ==> 盒子距离顶部距离
    const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight + (document.querySelector("#product_detail_title--details") as any).offsetHeight;

    const mechanismOffsetHeight: any = (document.querySelector("#product_detail_title--mechanism") as any).offsetHeight;

    const heng: any = 0;


    const firstscoll = topOffsetHeight - 40
    const secondscoll = firstscoll + heng
    const thirdscoll = secondscoll + mechanismOffsetHeight + heng
    // 判断滚动位置，设置活动导航项

    if (scrollTop >= 0 && scrollTop < firstscoll) {
        activeNavItem.value = "product_detail_top";
    } else if (scrollTop >= firstscoll && scrollTop < secondscoll) {
        activeNavItem.value = "product_detail_title";
    } else if (scrollTop >= secondscoll && scrollTop < thirdscoll) {
        activeNavItem.value = "product_detail_title--mechanism";
    } else if (event?.target.scrollHeight == scrollTop + event?.target.offsetHeight) {
        activeNavItem.value = "product_detail_title--content";
    } else {
        activeNavItem.value = "product_detail_title--info";
    }

    // 根据具体的滚动位置设定条件
    showFloatingNav.value = scrollTop > productTopOffset;
    // showToTopButton.value = scrollTop > 100; // 显示回到顶部按钮条件，例如滚动超过100px
};
/** 出库记录 */
const jumps = () => {
    router.push({
        path: '/detailList',
        query: {
            title: '出库记录',
            id: productId.value
        }
    })
}
/** 发起邀约 */
const invitationClick = async () => {
    dialogShow.value = true

}
</script>
<script lang="ts">
export default { name: 'supplyInvitationDetail' }
</script>
<style lang="less" scoped>
:deep(.van-cell) {
    padding: 0 !important;
}

:deep(.van-field__control) {
    background: #F6FAFF !important;
    border-radius: 5px;
}

:deep(.van-field__error-message) {
    position: absolute !important;
    bottom: 0px;
}

:deep(.van-field__word-limit) {
    font-weight: 400;
    font-size: 12px !important;
    color: #8492AD !important;
}

.operationBasicsDetail {
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .contents {
        width: 100%;
        height: calc(100% - 0px);
        overflow: auto;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
        align-content: flex-start;
        padding-top: 90px;
        background: #F6FAFF;
        overflow-y: scroll;
    }

    .pop_content {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 999;

        .launch_div {
            padding: 0px 10px 0 10px;
            box-sizing: border-box;
            padding-top: 90px;

            .buttons {
                font-size: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                width: 100%;
                margin-top: 10px;

                .cancel {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #1A1B1C;
                    background-color: #fff;
                    color: #000;
                    font-size: 14px;
                    color: #1A1B1C;
                    line-height: 44px;
                    text-align: center;
                }

                .save {
                    width: 162px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    color: #FFFFFF;
                    font-size: 14px;
                    line-height: 44px;
                    text-align: center;
                }
            }

            .launch_title {
                font-size: 14px;
                line-height: 40px;
                color: #1A1B1C;
            }

            .pop_div {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;

                .pop_div_out {
                    width: 25%;
                    min-width: 78px;
                    display: flex;
                    justify-content: center;
                    height: 30px;
                    border-radius: 15px;
                    line-height: 30px;
                    font-size: 14px;
                    margin-bottom: 15px;
                }

                .pop_div_item {
                    width: 78px;
                    display: flex;
                    justify-content: center;
                    height: 30px;
                    border-radius: 15px;
                    line-height: 30px;
                    font-size: 12px;
                }
            }
        }
    }


    .product_detail_top {
        width: 100%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        height: auto;

        .stock_box {
            position: absolute;
            left: 0;
            bottom: 0;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
            background: #000000aa;
            height: 30px;
            padding: 0 10px;
            display: flex;
            align-items: center;

            .line {
                width: 1px;
                height: 14px;
                background-color: #fff;
                margin: 0 10px;
            }
        }

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        .product_detail_top_img {
            width: 375px;
            height: 320px;
            position: relative;
        }

        .van-swipe-item {
            width: 375px !important;
            height: 320px !important;

            .van-image {
                width: 375px;
                height: 320px;
            }
        }

        .van-swipe {
            width: 375px;
            height: 320px;
        }

        .van-image {
            width: 375px;
            height: 320px;
        }
    }

    .product_detail_top_details {
        width: 100%;
        box-sizing: border-box;
        padding: 17px 15px 10px;
        background-color: #fff;

        .product_stylename {
            font-weight: 600;
            font-size: 18px;
            color: #1A1B1C;
            display: flex;
            align-items: center;

            .styleName {
                width: 0;
                flex: 1;
                margin-left: 10px;
            }

            .product_mechanism {
                width: 56px;
                height: 22px;
                background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                border-radius: 5px;
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                line-height: 22px;
            }
        }

        .product_box {

            position: relative;

            .product_fl_box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .box_l {
                    display: flex;
                    align-items: center;
                    height: 30px;
                    background: #EBF4FF;
                    border-radius: 5px;
                    margin-right: 7px;

                    .l_title {
                        width: 85px;
                        height: 30px;
                        background: url("@/assets/newui/details/icon_kucunbianma@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        font-weight: 500;
                        font-size: 14px;
                        color: #3F68DB;
                        line-height: 14px;
                        text-align: center;
                        line-height: 30px;

                        span {
                            display: inline-block;
                            transform: translateX(-4px);
                        }
                    }

                    .l_code {
                        font-weight: 500;
                        font-size: 14px;
                        color: #3F68DB;
                        line-height: 14px;
                        margin-left: 10px;
                        max-width: 70px;
                    }

                    .l_copy {
                        width: 15px;
                        height: 15px;
                        margin: 0 10px;
                        background: url("@/assets/newui/details/icon_kucunbianmacopy@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .box_r {
                    width: 0px;
                    flex: 1;
                    height: 30px;
                    background: #EBF4FF;
                    border-radius: 5px 0px 5px 5px;
                    text-align: center;
                    position: relative;
                    font-weight: 500;
                    font-size: 14px;
                    color: #3F68DB;
                    line-height: 30px;

                    .icon_69 {
                        position: absolute;
                        width: 49px;
                        height: 16px;
                        background: url("@/assets/newui/details/icon_69ma@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        right: 0;
                        top: -16px;
                    }
                }
            }
        }

        .product_id {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #825C2A;
            line-height: 12px;

            .produc_left {
                width: 210px;
                height: 20px;
                background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                border-radius: 5px;
                padding: 0 5px;

                .copy {
                    width: 12px;
                    height: 12px;
                    background: url("@/assets/newui/details/icon_zongsefuzhi@2x.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }

            .coreName {
                width: 0px;
                flex: 1;
                margin-left: 5px;
                height: 20px;
                background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                border-radius: 5px;
                align-items: center;

                .goods_r_l {
                    width: 34px;
                    height: 20px;
                    border-radius: 5px;
                    border: 1px solid;
                    text-align: center;
                    line-height: 20px;
                }

                .goods_r_r {
                    width: 0;
                    flex: 1;
                    text-align: center;
                }
            }

        }

        .product_user {
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;

            .van-image {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            .display {
                display: flex;
                align-items: center;
            }

        }

        .product_user {
            width: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 12px;
            line-height: 12px;

            .examine {
                align-items: center;


                .examine_item {
                    width: 85px;
                    height: 22px;
                    border-radius: 5px;
                    margin-right: 15px;
                    padding: 0 10px;

                    .examine_img_y {
                        width: 12px;
                        height: 12px;
                        background: url("@/assets/newui/productList/icon_lvseduihao@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .examine_img_n {
                        width: 12px;
                        height: 12px;
                        background: url("@/assets/newui/productList/icon_hongsecha@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .examine_y {
                    background: #E7FDEE;
                    color: #19D11B;
                }

                .examine_n {
                    background: #FDE7E7;
                    color: #FC2540;
                }

                .examine_items {
                    width: 68px;
                    height: 22px;
                    background: #E3E5E8;
                    border-radius: 13px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #8492AD;
                }
            }

        }

        .product_users {
            width: 345px;
            height: 65px;
            background: #F7F7F7;
            border-radius: 5px;

            .line {
                width: 1px;
                height: 25px;
                background-color: #ECECF2;
            }

            .product_users_item {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                line-height: 14px;
                width: 0;
                flex: 1;
                text-align: center;

                .product_users_text {
                    font-weight: 500;
                    font-size: 14px;
                    color: #1A1B1C;
                    line-height: 14px;
                    margin-top: 11px;
                }
            }
        }

    }

    .info {
        margin-top: 20px;
        width: 345px;

        .info_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;

            .img {
                width: 16px;
                height: 16px;
            }

            .title {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                width: calc(100% - 30px);
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .links {
                width: 7px;
                height: 12px;
            }
        }
    }

    .back {
        background: #F6FAFF;
        width: 100%;
        height: 10px;
    }

    .footer {
        width: 100%;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        box-sizing: border-box;
        padding: 0 15px 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;

        .more {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 12px;
            color: #0094FF;
            line-height: 12px;
            flex: 1;
            font-size: 14px;
            color: #464E5D;
            line-height: 14px;
        }



        .footer_right {
            width: 154px;
            height: 44px;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }

    }

    .right_pop {
        position: fixed;
        bottom: 70px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        border-radius: 5px;
        left: 15px;
        font-weight: 400;
        font-size: 14px;
        color: #0094FF;
        box-sizing: border-box;
        padding: 20px 15px;


        .rightPopBT {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }

            .imgbox {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }

            .bj {
                background: url("@/assets/newui/details/icon_bianji.svg");
                background-repeat: no-repeat;
                background-size: 100% 100%;

            }

            .tm {
                background: url("@/assets/newui/details/icon_dayintiaoma.svg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .bgzb {
                background: url("@/assets/newui/details/icon_genghuanzhubo.svg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .wrapper_qualifications {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 280px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            padding: 0 15px;

            .close {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            .describe {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                margin-bottom: 10px;
                padding: 0 20px;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .column {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;


                .lable {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;

                }

                .value {
                    width: 214px;
                    height: 36px;
                    background: #F2F3F5;
                    border-radius: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    box-sizing: border-box;
                    padding: 0 15px;

                    .van-image {
                        width: 10px;
                        height: 6px;
                    }
                }
            }

            .buttons {
                width: 285px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                line-height: 44px;
                position: absolute;
                bottom: 10px;

                .cancel {
                    width: 135px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    font-weight: 400;
                    font-size: 16px;
                    color: #0094FF;
                }

                .save {
                    width: 135px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }

        }
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 415px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;

            :deep(.van-cell:after) {
                display: none;
            }

            :deep(.van-cell) {
                padding: 10px 16px !important;
            }

            .label {
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                padding-left: 16px;
            }

            :deep(.van-field__control) {
                background: #F6FAFF !important;
                // height: 40px !important;

            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .dates {
                :deep(.van-field__control) {
                    height: 40px !important;
                }
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .van-image {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            :deep(.van-form) {
                min-height: 265px;
            }

            .buttons {
                color: #FFFFFF;
                font-size: 14px;
                width: 285px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                margin: auto;
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }

        }
    }


    .wrappers {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 500px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            padding: 0 15px;

            .mechanism_conent {
                width: 285px;
                height: 280px;
                background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
                border-radius: 10px;
                margin-top: 15px;
                box-sizing: border-box;
                padding: 20px 15px;

                :deep(.van-cell-group--inset) {
                    margin: 0 !important;
                    margin-bottom: 20px !important;
                    background: transparent !important;
                }

                :deep(.van-cell) {
                    padding: 0 !important;
                    background: none !important;
                    background: transparent !important;
                }

                :deep(.van-field__control) {
                    font-weight: 400 !important;
                    font-size: 14px !important;
                    color: #8492AD !important;

                }

                :deep(.van-field__button) {
                    padding-left: 0px !important;
                }

                :deep(.van-field__control) {
                    background: transparent !important;
                }

                .mechanism_conent_item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 20px;

                    .labels {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                    }

                    .value {
                        font-weight: 400;
                        font-size: 14px;
                        color: #8492AD;
                    }
                }
            }

            .close {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            .column {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;


                .lable {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;

                }

                .value {
                    width: 214px;
                    height: 36px;
                    background: #F2F3F5;
                    border-radius: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    box-sizing: border-box;
                    padding: 0 15px;

                    .van-image {
                        width: 10px;
                        height: 6px;
                    }
                }
            }

            :deep(.van-cell:after) {
                display: none;
            }

            .label {
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                padding-left: 16px;
            }

            :deep(.van-field__control) {
                background: #F6FAFF !important;
                // height: 40px !important;

            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .dates {
                :deep(.van-field__control) {
                    height: 40px !important;
                }
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }



            :deep(.van-form) {
                min-height: 265px;
            }

            .buttons {
                width: 285px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                line-height: 44px;
                position: absolute;
                bottom: 10px;

                .cancel {
                    width: 135px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    font-weight: 400;
                    font-size: 16px;
                    color: #0094FF;
                }

                .save {
                    width: 135px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }

            .describe {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                margin-bottom: 10px;
                padding: 0 20px;
            }



        }

    }

    .dialog_top {
        width: 100%;
        height: 185px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;

        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 20px;
            padding: 0 20px;
        }

    }

    .postscript {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 20px;

        .buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .submit {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                background: #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }







    :deep(.van-nav-bar) {
        // background-color: #1466ff;
        height: 46px !important;
        width: 100%;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }
}

// 多机制TOP图片
.mechanism_mall {
    position: absolute;
    right: 0;
    top: 35px;
    width: 70px;
    height: 41px;
    background: url("@/assets/newui/details/icon_duojizhi@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

//轮播计数
.hmshop-custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 30px;
    background: #000000aa;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    font-style: normal;
    padding: 0 10px;
}

.text-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-10 {
    margin-top: 10px;
}

.b-box {
    box-sizing: border-box;
}

.fl-box-s-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fl-box {
    display: flex;
}

//浮动导航
.hmshop-floating-nav {
    position: fixed;
    top: 90px;
    display: flex;
    align-items: center;
    background-color: white;
    z-index: 999;
    width: 100%;
    height: 34px;
    align-content: center;
    color: #b8beca;
    box-shadow: 0px 4px 8px 0px rgba(189, 195, 204, 0.5);
    border: 1px solid #F3F3FF;

    ul {
        list-style: none;
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;

        li {
            width: 0px;
            flex: 1;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            line-height: 14px;
            text-align: center;
            font-style: normal;
            text-transform: lowercase;
        }

        .red-text {
            color: #0094FF;
            /* 激活状态下字体变为红色 */
        }
    }
}

.top_loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #00000055;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mechanism_area {
    padding: 0 15px;
}

.product_detail_title--content {
    background: #fff;
    padding: 15px;

    .mechanism_title {
        font-weight: 500;
        font-size: 14px;
        color: #0094FF;
        margin-top: 20px;
    }
}

.pop_xhibit_item {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    display: flex;


    .pop_label {
        width: 100%;
        flex: 3;
        color: #464E5D;
    }


    .pop_value {
        width: 0;
        flex: 5;
        color: #1A1B1C;
    }

    .pop_value_contract {
        display: flex;
        flex-wrap: wrap;

        div {
            margin-right: 9px;
            margin-bottom: 5px;
        }
    }

    .pop_values {
        padding-top: 10px;

        .mul_imags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;


        }

        .van-image {
            width: 90px;
            height: 90px;
        }
    }
}

.linkbox {
    justify-content: space-between;
    align-items: center;

    .pop_linklabel {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        line-height: 16px;
        text-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;

        .imgbox {
            width: 36px;
            height: 36px;
            margin-right: 10px;
        }

        .rk {
            background: url("@/assets/newui/details/icon_chuku@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .pop_rjt {
        width: 7px;
        height: 12px;
        background: url("@/assets/newui/details/icon_heisejiantou.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

.pop_rjt {
    width: 7px;
    height: 12px;
    background: url("@/assets/newui/details/icon_heisejiantou.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

:deep(.van-stepper__input) {
    width: 60px !important;
    background-color: #fff;
    font-size: 16px;
    color: #0094FF;
    border-top: 1px solid #F3F3FF;
    border-bottom: 1px solid #F3F3FF;
    margin: 0 !important;
}
</style>